<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>添加优惠券</title>
    <meta name="description" content="">
    <!-- <link href="js/layer/need/layer.css" rel="stylesheet" /> -->
    <link href="js/layer/need/layer.css" rel="stylesheet" />
    <link href="js/My97DatePicker/lang/zh-cn.js" rel="stylesheet" />
    <link href="js/My97DatePicker/skin/WdatePicker.css" rel="stylesheet" />
    <link href="js/My97DatePicker/skin/whyGreen/datepicker.css" rel="stylesheet" />
    <link href="js/My97DatePicker/skin/default/datepicker.css" rel="stylesheet" />

    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        html,
        body {
            width: 100%;
            height: auto;
        }
        
        .wrap {
            width: 100%;
            height: auto;
            padding: 20px;
            font-size: 14px;
            color: #222;
            background-color: #fff;
        }
        
        .wrap input {
            outline: none;
            border: none;
            background-color: #edeff5;
            height: 35px;
            line-height: 35px;
            padding: 0 10px;
        }
        
        .wrap .input1 {
            width: calc(100% - 90px);
        }
        
        .wrap .input2 {
            width: 30%;
        }
        
        #demo1 {
            margin-right: 5px;
        }
        
        #demo2 {
            margin-left: 5px;
        }
        
        .wrap .input3 {
            width: 50%;
            margin-right: 5px;
        }
        
        .wrap textarea {
            width: 70%;
            outline: none;
            resize: none;
            border: none;
            background-color: #edeff5;
            padding: 5px;
            font-size: 14px;
        }
        
        .boxdiv {
            width: 100%;
            height: 35px;
            -webkit-display: flex;
            -moz-display: flex;
            display: flex;
            /* justify-content: space-between; */
            align-items: center;
            margin-bottom: 30px;
        }
        
        .boxdiv>span {
            display: inline-block;
            margin-right: 10px;
            width: 80px;
        }
        
        #submit {
            border: none;
            outline: none;
            background-color: #8d9782;
            color: #fff;
            width: 50%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            margin: 0 auto;
        }
        
        .btbox {
            text-align: center;
            margin: 80px auto 30px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="boxdiv">
            <span>优惠券金额</span>
            <input type="text" placeholder="请输入优惠券金额(数字)" class="input1" id="price">
        </div>
        <div class="boxdiv">
            <span>使用期限</span>
            <input type="text" placeholder="请输入数字" class="input3" id="day">天

        </div>
        <div class="boxdiv">
            <span>上架期限</span>
            <input id="demo1" name="starttime" class="laydate-icon date1 input2" placeholder="开始时间" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd', position: { top: 1, left: 0 }, readOnly: true })" readonly="readonly"> -
            <input id="demo2" name="endtime" class="laydate-icon date2 input2" placeholder="结束时间" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd', position: { top: 1, right: 0 }, readOnly: true, minDate: '#F{$dp.$D(\'demo1\');}' })" readonly="readonly">

        </div>
        <div class="boxdiv" style="align-items: flex-start;">
            <span>使用规则</span>
            <textarea name="txtarea" id="txtarea" rows="5" cols="10" placeholder="请输入优惠券使用规则"></textarea>
        </div>

        <div class="boxdiv btbox">
            <button id="submit" onclick="submit();">确认添加</button>
        </div>
    </div>

    <script src="js/jquery-2.2.4.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/My97DatePicker/WdatePicker.js"></script>
    <script>
        var reg = /^[0-9]*$/;

        function submit() {
            var price = $('#price').val();
            var day = $('#day').val();
            var startdate = $('#demo1').val();
            var startend = $('#demo2').val();
            var text = $('#txtarea').val();

            console.log(startdate); //现在的时间格式是2020-04-03
            console.log(startend);


            if (price == '' || price.replace(/(^\s*)|(\s*$)/g, "") == "") {
                layer.open({
                    content: "请输入优惠券金额！",
                    skin: "msg",
                    time: 2
                });
                return false;
            }
            if (!reg.test(price)) {
                layer.open({
                    content: "请输入数字！",
                    skin: "msg",
                    time: 2
                });
                return false
            }
            if (day == '' || day.replace(/(^\s*)|(\s*$)/g, "") == "") {
                layer.open({
                    content: "请输入使用期限！",
                    skin: "msg",
                    time: 2
                });
                return false;
            }
            if (!reg.test(day)) {
                layer.open({
                    content: "请输入数字！",
                    skin: "msg",
                    time: 2
                });
                return false
            }
            if (startdate == '') {
                layer.open({
                    content: "请选择上架开始时间！",
                    skin: "msg",
                    time: 2
                });
                return false;
            }
            if (startend == '') {
                layer.open({
                    content: "请选择上架结束时间！",
                    skin: "msg",
                    time: 2
                });
                return false;
            }
            if (text == '' || text.replace(/(^\s*)|(\s*$)/g, "") == "") {
                layer.open({
                    content: "请输入使用规则！",
                    skin: "msg",
                    time: 2
                });
                return false;
            }
            //提交接口
        }
    </script>
</body>

</html>